<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻类型管理</title>
    <link rel="stylesheet" type="text/css" href="css/news.css" />
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div style="text-align: center"><h2>新闻类型管理</h2></div>
    <div style="text-align: right;padding: 10px 50px 10px 0">
        <a href="/index.html">新闻管理</a>
    </div>
<div id="app" style="display: flex;" >
    <div class="sidePadDiv"></div>
    <div class="middleDiv">
        <div class="operatorDiv">
            <input type="search" placeholder="输入搜索新闻类型名称关键字" v-model="searchMap.keywords">
            <input id="search" type="button" @click="search()" value="搜索"/>
            <input id="add" @click="edit()" value="新增" type="button"/>

        </div>
        <div class="dataTableDiv">
            <table>
                <thead>
                <tr>
                    <td style="border-left: none">新闻ID</td>
                    <td>新闻类型名称</td>
                    <td style="border-right: none">操作</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="entity in resultMap.records">
                    <td style="text-align: center;border-left: none">{{entity.id}}</td>
                    <td>{{entity.typeName}}</td>
                    <td  style="text-align: center;border-right: none">
                        <button @click="edit(entity.id)" type="button">修改</button>
                        <button @click="deleteNews(entity.id)" type="button">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="pageDiv">
            <ul>
                <li :class="['prev',searchMap.pageNo>1?'':'downUpDisabled']">
                    <a @click.prevent="queryByPage(searchMap.pageNo-1)" href="#">«上一页</a>
                </li>
                <li v-if="frontDot" class="dotted"><span>...</span></li>
                <li v-for="pn in pageNoList" :class="searchMap.pageNo==pn?'active':''">
                    <a @click.prevent="queryByPage(pn)" href="#">{{pn}}</a>
                </li>
                <li v-if="backDot" class="dotted"><span>...</span></li>
                <li :class="['next',searchMap.pageNo<resultMap.pages?'':'downUpDisabled']">
                    <a @click.prevent="queryByPage(searchMap.pageNo+1)" href="#">下一页»</a>
                </li>
            </ul>
            <div><span>共 {{resultMap.pages}} 页&nbsp;</span><span>
                      跳转到第
                      <input id="pnum" @keyup.enter="queryByPage(searchMap.pageNo)" v-model.number="searchMap.pageNo" type="text" class="page-num">
                      页</span></div>
        </div>
    </div>
    <div class="sidePadDiv"></div>

    <!-- 遮罩层 -->
    <div class="overlay" v-show="overlayVisible">
        <div class="modal">
            <h2>{{showOperation}}新闻类型</h2>
            <form @submit.prevent="submitForm">
                <div class="formEleDiv">
                    <label>新闻类型名称:</label>
                    <input type="text" v-model="newsType.typeName" required>
                </div>

                <br>
                <div class="formBtnDiv">
                    <input type="submit" value="提交">
                    <input type="button" @click="closeOverlay()" value="关闭" style="float-displace:line;margin-left: 10px">
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            newsList:[],
            productTypes: [],
            //查询条件
            searchMap: {"keywords": "","pageNo": 1, "pageSize": 3},
            //搜索结果
            resultMap: {"total": 0, "pages": 0, "records":[]},
            //导航条-页号数组
            pageNoList: [],
            //导航条-前面3个点
            frontDot: false,
            //导航条-后面3个点
            backDot: false,
            //遮罩层
            overlayVisible: false,
            newsType:{"typeName":""},
            showOperation: "新增"
        }, methods:{
            search: function () {
                axios.post("/newsType/search?pageNum=" + this.searchMap.pageNo + "&pageSize=" + this.searchMap.pageSize
                    , {"typeName": this.searchMap.keywords}).then(function (response) {
                    app.resultMap = response.data.data;
                    //构建分页导航条
                    app.buildPagination();
                });
            },//构建分页导航条
            buildPagination() {
                this.pageNoList = [];

                //定义要在页面显示的页号的数量
                var showPageNoTotal = 5;

                //起始页号
                var startPageNo = 1;
                //结束页号
                var endPageNo = this.resultMap.pages;

                //如果总页数大于要显示的页数才有需要处理显示页号数；否则直接显示所有页号
                if (this.resultMap.pages > showPageNoTotal) {

                    //计算当前页左右间隔页数
                    var interval = Math.floor(showPageNoTotal / 2);

                    //根据间隔得出起始、结束页号
                    startPageNo = parseInt(this.searchMap.pageNo) - interval;
                    endPageNo = parseInt(this.searchMap.pageNo) + interval;

                    //处理页号越界
                    if (startPageNo > 0) {
                        if (endPageNo > this.resultMap.pages) {
                            startPageNo = this.resultMap.pages - showPageNoTotal +1;
                            endPageNo = this.resultMap.pages;
                        }
                    } else {
                        endPageNo = showPageNoTotal;
                        startPageNo = 1;
                    }
                }

                //分页导航条上的前、后的那三个点
                this.frontDot = false;
                this.backDot = false;

                if (1 < startPageNo) {
                    this.frontDot = true;
                }

                if (endPageNo < this.resultMap.pages) {
                    this.backDot = true;
                }

                //设置要显示的页号
                for (let i = startPageNo; i <= endPageNo; i++) {
                    this.pageNoList.push(i);
                }
            },
            //根据页号查询
            queryByPage: function (pageNo) {
                if (0 < pageNo && pageNo <= this.resultMap.pages) {
                    this.searchMap.pageNo = pageNo;
                    this.search();
                }
            },
            edit(newsId){
                //新增还是修改
                if (newsId === undefined) {
                    //新增
                    this.showOperation = "新增";
                    this.resetForm();
                } else {
                    //修改
                    this.showOperation = "修改";
                    //查找新闻；进行回显
                    axios.get("/newsType/" + newsId).then(function (response) {
                        app.newsType = response.data;
                    });
                }
                //；打开新增页面
                this.overlayVisible = true;
            },
            deleteNews(newsId){
                axios.delete("/newsType?ids="+newsId).then(function (response){
                    app.search();
                });
            },
            submitForm() {

                if (this.newsType.id === undefined) {
                    axios.post("/newsType", app.newsType).then(function (response) {
                        //刷新列表
                        app.search();
                        //关闭罩层
                        app.closeOverlay();
                        app.resetForm();
                    });
                } else {
                    axios.put("/newsType", app.newsType).then(function (response) {
                        //刷新列表
                        app.search();
                        //关闭罩层
                        app.closeOverlay();
                        app.resetForm();
                    });
                }
            },
            resetForm(){
                this.newsType = {};

            },
            closeOverlay(){
                this.overlayVisible = false;
            }
        }
        ,created(){
            this.search();
        }
    });
</script>

</body>
</html>